<template>
    <span>
       <button>-</button> 
       <input type="text" v-model.number="count"> 
       <button>+</button>
    </span>
</template>
<script setup>
    // 定义传入的props属性，define定义，props属性
    // defineEmits 定义发射事件的方法
    // watchEffect 监听变化执行回调
    // defineExpose 定义导出的方法
    // provide 提供数据（跨组件传参）
    // inject 注入数据 （跨组件接受参数）
    import { defineProps ,ref,defineEmits,watchEffect,defineExpose} from 'vue';
    const props = defineProps({
        "num":{type:Number,default:1}
    })
    const count = ref(props.num);
    const emits = defineEmits(["input"])
    // 只要count变化，发送一个事件
    watchEffect(()=>{
        // 发送事件
        emits("input",count.value)
    })
    function add(n){
        count.value+=n;
    }
    // 导出add 方法(把什么方法暴露给父组件-》通过ref引用)
    defineExpose({
        add,
        count,
    })
 


</script>